<template>
  <div class="cargo">
    <div class="header" ref="header">
      <div class="icon-slide" @click="toggleSlide">
        <i class="fa fa-bars"></i>
      </div>
    </div>
    <div class="side" ref="side">
      <div class="side-header">
        <h1 class="title">
          航空物流
        </h1>
      </div>
      <div class="side-menu">
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#323641"
          text-color="#fff"
          active-text-color="#5491de">
          <li class="menu-item"
              :class="{'active-menu' : activeIndex === index}"
              v-for="(item,index) in menuRoutes"
              :key="item.title"
              @click="selectMenu(item,index)"
              @mouseover="mouserOverMenu(item,index)"
              @mouseleave="mouseLeaveMenu">
            <i :class="item.icon"></i>
            <span class="title" :class="{'slide-hide' : slideState}">{{item.title}}</span>
          </li>
        </el-menu>
        <transition name="fade">
          <div
            @mouseover="mouserOverSubMenu"
            @mouseleave="mouseLeaveSubMenu"
            class="sub-menu"
            ref="subMenu"
            v-show="activeSubmenu.length && submenuShow">
            <router-link @click.native="changeSubMenu" :to="menu.path" tag="li" class="sub-menu-item"
                         v-for="menu in activeSubmenu" :key="menu.path">
              {{menu.title}}
            </router-link>
          </div>
        </transition>
      </div>
      <div class="side-footer">
        <div class="user-wrapper">
          <img src="../../assets/image/cargo/timg.jpg"/>
          <span @click="logout">退出</span>
        </div>
      </div>
    </div>
    <div class="container" ref="container">
      <router-view/>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapGetters} from 'vuex'

  const SLIDE_PERCENT = 2.3 //侧边栏缩放比例

  export default {
    created() {
      this.getMenuRoutes()
      this.findActiveIndex()
    },
    mounted() {
      this.getSlide()
    },
    data() {
      return {
        menuRoutes: [],
        activeSubmenu: [],
        activeIndex: '',
        submenuShow: false,
        slideState: false
      }
    },
    computed: {
      ...mapGetters(['routes'])
    },
    methods: {
      getMenuRoutes() {
        const children = this.routes[0].children
        let res = []
        // 用来判断有没有添加过一级菜单
        let recodeMap = {}
        // 记录每个路由name对应的主菜单index 方便findActiveIndex方法查找
        let indexMap = {}
        children.forEach((val,index) => {
          const meta = val.meta
          // 一级菜单
          if (!meta.parentTitle) {
            res.push({
                ...meta.title,
              path: val.path
            })
            indexMap[val.name] = index
          }else {
            // 第一次添加一级菜单
            if (!recodeMap[meta.parentTitle.title]) {
              res.push({
                ...meta.parentTitle
              })
              const lastOne = res.length - 1
              res[lastOne].children = []
              res[lastOne].children.push({
                title: meta.title,
                path: val.path
              })
              indexMap[val.name] = lastOne
              // 记录下标 方便下次快速添加
              recodeMap[meta.parentTitle.title] = lastOne
            }else {
              // 该主菜单已经添加过二级菜单
              res[recodeMap[meta.parentTitle.title]].children.push({
                title: meta.title,
                path: val.path
              })
              indexMap[val.name] = recodeMap[meta.parentTitle.title]
            }
          }
        })
        this.menuRoutes = res
        // 挂载到vue实例下让findActiveIndex方法调用
        this.indexMap = indexMap
      },
      findActiveIndex() {
        const name = this.$route.name
        this.activeIndex = this.indexMap[name]
      },
      selectMenu(item, index) {
        // 一级菜单没有path
        if (!item.path) {
          return
        }
        this.$router.push(item.path)
        this.activeIndex = index
      },
      logout() {
        window.localStorage.setItem('keys',null)
        this.$router.push('login')
      },
      mouserOverMenu(item, index) {
        this.submenuShow = true
        this.activeSubmenu = item.children || []
        this.overMenuIndex = index
      },
      mouseLeaveMenu() {
        this.submenuShow = false
      },
      mouserOverSubMenu() {
        this.submenuShow = true
      },
      mouseLeaveSubMenu() {
        this.submenuShow = false
      },
      changeSubMenu() {
        this.activeIndex = this.overMenuIndex
      },
      toggleSlide() {
        this.slideState = !this.slideState
        window.localStorage.setItem('slide', this.slideState)
        const side = this.$refs.side
        const header = this.$refs.header
        const container = this.$refs.container
        const subMenu = this.$refs.subMenu
        if (!this.defaultStyle) {
          this.defaultStyle = {}
          this.defaultStyle.sideWidth = getComputedStyle(side).width.replace('px','')
          this.defaultStyle.containMargin = getComputedStyle(container).marginLeft.replace('px','')
        }

        // true 收起
        if (this.slideState) {
          const calcWidth = this.defaultStyle.sideWidth / SLIDE_PERCENT
          side.style.width = `${calcWidth}px`
          const diffX = this.defaultStyle.sideWidth - calcWidth
          header.style.transform = `translateX(-${diffX}px)`
          subMenu.style.transform = `translateX(-${diffX}px)`
          container.style.marginLeft = `${this.defaultStyle.containMargin - diffX}px`
        }else {
          // 展开
          side.style.width = `${this.defaultStyle.sideWidth}px`
          header.style.transform = ''
          subMenu.style.transform = ''
          container.style.marginLeft = `${this.defaultStyle.containMargin}px`
        }
      },
      getSlide() {
        const slideState = window.localStorage.getItem('slide')
        console.log(slideState)
        if (slideState === 'true') {
          this.toggleSlide()
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .slide-hide
    display none

  .el-menu
    border none

  .cargo
    overflow: hidden
    .header
      display flex
      position fixed
      height 60px
      width 100%
      margin-left 150px
      box-shadow  5px 5px 5px #ddd;
      transition-duration .2s
      .icon-slide
        height 100%
        line-height 60px
        white-space nowrap
        padding 0 20px
        cursor pointer
        i
          font-size 20px
          color #999
        &:hover
          background-color: #f9f9f9;
          i
            color: #5491de;
    .side
      position fixed
      height 100%
      width 150px
      bottom 0
      top 0
      background #323641
      transition width .2s
      .side-header
        height 60px
        background #262930
        .title
          font-size 16px
          color #fff
          font-weight 700
          text-align center
          line-height 60px
      .side-menu
        position relative
        height 100%
        .menu-item
          position: relative;
          font-size: 14px;
          padding: 0 13px;
          -webkit-transition: border-color .3s, background-color .3s, color .3s;
          transition: border-color .3s, background-color .3s, color .3s;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          padding-left: 20px;
          color: rgb(255, 255, 255);
          background-color: rgb(50, 54, 65);
          height: 56px;
          line-height: 56px;
          cursor: pointer;
          white-space: nowrap;
          list-style: none;
          &:hover
            background rgb(40, 40, 52)
          i
            color #909399
            font-size 25px
            margin-right: 15px;
            width: 15px;
            text-align: center;
            vertical-align: middle;
          &.active-menu
            color #5491de
            border-left 2px solid #5491de
          &.active-menu i
            color #5491de
        .sub-menu
          position absolute
          width 150px
          top 0
          bottom 0
          left 150px
          box-shadow 0 0 8px #ddd
          min-height 100%
          background #fff
          .sub-menu-item
            height 48px
            line-height 48px
            font-size 15px
            color #666
            padding 0 16px
            cursor pointer
            &:hover
              background #f9f9f9
      .side-footer
        position absolute
        bottom 0
        background #262930
        width 100%
        height 50px
        .user-wrapper
          position absolute
          right 5px
          top 50%
          transform translateY(-50%)
          white-space nowrap
          img
            width 25px
            height 25px
            border-radius 50%
            vertical-align middle
            margin-right 5px
          span
            color #fff
            cursor pointer
            font-size 12px
    .container
      width 100%
      margin-top 65px
      margin-left 150px
      transition-duration .2s

  .fade-enter-active, .fade-leave-active {
    transition: opacity .2s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }

  // 激活子菜单样式
  .router-link-active {
    background #f9f9f9
  }
</style>
